import React, { Component,createRef } from 'react'
import Searchdispath from './Searchdispath'
import SearchClear from './SearchClear'
import SearchXl from './SearchXl'
import SearchDis from './SearchDis'
import {Searchheader} from './SearchStyle'
@Searchdispath
@SearchClear
@SearchXl
@SearchDis
 class Searchiput extends Component {
     constructor(props){
         super(props)
         this.sj=createRef()
        //  console.log(this.props.serchStatus)
         
     }
    render() {
        return (
            <Searchheader>
                <input type="text" ref={el=>this.sj=el} placeholder="搜索作品名" /> 
                <div onClick={this.SearFn} disabled={this.props.serchStatus}>搜索</div>
            </Searchheader>
        )
    }
    SearFn=()=>{
        // 搜索关键词
       let sj=this.sj.value
        if(sj!==''){
           sj=sj.replace(/^\s*/,'').replace(/\s*$/,'')
            // 请求数据
            this.props.getSearcDataCmp(sj)
            //按钮禁用
            this.props.DisSearchCmp()
        }else{
            // 清空
            this.props.getClearDataCmp()
        }

    }
    
}
export default Searchiput
